<template>
	<div class="app-container">
		<el-row :gutter="0" class="el-card is-always-shadow el-card__body content_h">
			<el-col class="title_tops">
				<div class="title_tops_t">
					<div class="title_top_E">Statistical Management</div>
					<div class="title_top_C">统计权限管理</div>
				</div>
			</el-col>
			<el-col class="screen_case">
				<div class="screen_case_amount screen_caseMD">
					<span class="screen_case_amount_lable">医护数量：</span>
					<span class="screen_case_amount_value">{{total}}</span>
				</div>
				<screenSelect title="医护名称" type='input' v-model="screenFrom.username" :isValue='screenFrom.username'
					placeholder="请输入医护名称" @transfer="valueHeld($event,'username')" class="screen_caseMD"
					width="148px" />
					<!-- <screenSelect title="机构名称" type='input' v-model="screenFrom.hospitalName" :isValue='screenFrom.hospitalName'
					  placeholder="请输入机构名称" @transfer="valueHeld($event, 'hospitalName')"  /> -->
				<screenSelect title="职位权限" type='select' v-model="screenFrom.isHas" :isValue='screenFrom.isHas'
					placeholder="请选择" @transfer="valueHeld($event,'isHas')" :options="options" class="screen_caseMD"
					width="170px" />
				<el-button type="primary" class="ch_button screen_caseMD" @click="search">
					<img class="ch_button_img" src="../../assets/iconfont/zoom-out.png" alt="" srcset="">
					<div>搜索</div>
				</el-button>
				<el-button type="primary" class="ch_button screen_caseMD" @click="reset">
					<img class="ch_button_img" src="../../assets/iconfont/rotate-ccw.png" alt="" srcset="">
					<div>选项重置</div>
				</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="0" class="card_content">
			<template v-for="(item, index) in cardData">
			  <smallCard :title="item.staffName" :subhead="'所属科室：' + item.deptName" :subheading="'医护类型：' + item.typeName"
			    @clickHeld="multifunction($event, item.staffId)" :img="item.staffAvatarUrl" :line="item.status == 0 ? true : false" buttons="2"
			    type="statistical" />
			</template>
			<div class="paginationblock" v-if="total > 0">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageData.pageNo" :page-sizes="[10, 20, 30, 40]" :page-size="pageData.pageSize"
					:background="true" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</el-row>
		<el-dialog id="viewHeld" custom-class="eldialogCH" :modal='true' :visible.sync="viewHeld" :show-close='false'
			center>
			<div slot="title" class="dialog_title_ch">
				<div>
					<div class="dialog_title_ch_subheading">
						Employee Information Details
					</div>
					<div class="dialog_title_ch_subhead">
						统计权限详情
					</div>
				</div>
				<div class="icon_x-circle" @click="viewHeld = false"></div>
				<!-- <img class="icon_x-circle" src="../../assets/iconfont/x-circle.png" alt="" @click="viewHeld = false"> -->
			</div>
			<div class="dialog_title_ch_conter">
				<div class="dialog_title_ch_conter_left">
				  <img :src="addFrom.staffAvatarUrl" alt="" srcset="">
				  <div class="quan" :class="addFrom.status == 0 ? 'on_line' : 'off_line'"></div>
				</div>
				<div class="dialog_title_ch_conter_right">
					<el-row>
						<div class="postTitle">{{ addFrom.staffName }}</div>
						<div class="postTitle_conter">
							<div class="postTitle_conter_item">
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">所属机构：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.hospitalName }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">医护类型：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.typeName }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">医护职称：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.titleName }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">所在科室：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.deptName }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">等级权限：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.permissionName }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">联系电话：</span>
								  <span class="postTitle_conter_itemspan2">{{ addFrom.phone }}</span>
								</div>
								<div class="postTitle_conter_itemspan">
								  <span class="postTitle_conter_itemspan1">创建时间：</span>
								  <span class="postTitle_conter_itemspan2">{{ parseTime(addFrom.createTime, '{y}.{m}.{d}') }}</span>
								</div>
							</div>
						</div>
					</el-row>
					<!-- <el-row class="authority_bottom">
						<div class="content_checkbox">
							<div class="title_che">小程序权限：</div>
							<div class="title_che_sup">统计模块</div>
							<div class="authority" v-for="(item,index) in checkDataL" :key="index">
								<div class="title_che_sup">{{item.title}}</div>
								<el-checkbox-group v-model="checkListview">
									<el-checkbox v-for="(v,i) in item.child" :key="i" :label="v.value"
										disabled>{{v.lable}}</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
					</el-row> -->
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import construction from '@/components/construction/index.vue'
	import screenSelect from '@/components/screenSelect/index.vue'
	import smallCard from '@/components/smallCard/index.vue'
	import {
		getStatisticalList,getStatisticalMenuList
	} from '@/api/statistical.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "statistical",
		components: {
			construction,
			screenSelect,
			smallCard
		},
		computed: {
			...mapGetters([
				'permissionList'
			])
		},
		data() {
			return {
				keshi: 0,
				viewHeld: false,
				editHeld: false,
				familyHeld: false,
				options: [{
					value: 0,
					label: '否'
				}, {
					value: 1,
					label: '是'
				}],
				cardData: [],
				imageUrl: '',
				checkList: [],
				checkListview: ['1', '3'],
				checkDataL: {},
				pageData: {
					pageNo: 1,
					pageSize: 10
				},
				total: 0,
				screenFrom: {
					username: '',
					isHas: '',
					hospitalName:''
				},
				addFrom: {},
			};
		},
		mounted() {
			console.log(this.$route);
			this.getList()
		},

		methods: {
			getList() {
				let that = this
				const loading = that.$loading({
					lock: true,
					text: 'Loading...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				getStatisticalList(this.screenFrom, this.pageData).then(res => {
					if (res.code == 200) {
						this.cardData = res.data.defaultStaffPage.records
						this.total = res.data.defaultStaffPage.total
						loading.close()
					}
				})
				// getStatisticalMenuList().then(res=>{
				// 	if(res.code==200){
				// 		this.checkDataL = res.data.statisticalMenu
				// 	}
				// })

			},
			search() {
				this.pageData={
					pageNo: 1,
					pageSize: 10
				}
				this.getList()
			},
			reset() {
				this.screenFrom = {
					username: '',
					isHas: '',
					hospitalName:''
				}
				this.getList()
			},
			valueHeld(childParam, fatherparam) {
				this.screenFrom[fatherparam] = childParam
			},
			handleSizeChange(val) {
				this.pageData.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.pageData.pageNo = val
				this.getList()
			},
			multifunction(e, id) {
				console.log(e);
				if (e == 'editHeld') {
					this.$router.push({
						path: `/statistical/statisticaledit/${id}`
					})
				} else {
					this.cardData.map(item => {
					  if (item.staffId == id) {
					    this.addFrom = item
					  }
					})
					
					this[e] = true
				}
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_content {
		margin-top: 16px;
		height: calc(100% - 170px);
		overflow-y: auto;
	}

	.card_contents {
		height: calc(100% - 1px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.card_contents_tex {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 20px;
		}

		.card_contents_footer {
			padding: 16px 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1px solid #EFEFEF;
		}
	}

	.content_h {
		min-height: 149px;
		border-radius: 5px;
		padding: 0px;
	}

	.title_top {
		min-height: 79px;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 20px;
	}

	.title_tops {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 0 20px;
		height: 79px;
		border-bottom: 1px solid #EFEFEF;

		.title_tops_t {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.title_tops_b {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 28px;
			cursor: pointer;

			img {
				width: 24px;
				height: 24px;
				margin-right: 5px;
			}

			span {
				font-size: 16px;
				font-weight: 400;
				color: #000;
			}
		}
	}

	.screen_case_title {
		font-size: 16px;
		font-weight: 400;
		color: #000;
		margin-right: 35px;
	}

	.title_top_E {
		font-size: 12px;
		font-weight: 400;
		color: #9898989E;
	}

	.title_top_C {
		font-size: 18px;
		font-weight: 400;
		color: #000;
	}

	.screen_case {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 15px 30px;
	}

	.screen_case_amount {
		margin-right: 100px;

		.screen_case_amount_lable {
			font-size: 15px;
			color: #989898;
		}

		.screen_case_amount_value {
			font-size: 16px;
			color: #000;
		}
	}

	::v-deep .el-button.ch_button {
		padding: 8px 9px;
	}

	::v-deep .el-button.ch_button span {
		display: flex;
		align-items: center;

		div {
			font-size: 13px;
			font-weight: 400;
			margin-left: 4px;
		}
	}

	#viewHeld,
	#editHeld,
	#familyHeld {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	::v-deep .eldialogCH {
		border-radius: 6px;
		width: 1268px;
		margin-top: 0 !important;
	}

	::v-deep #editHeld .eldialogCH {
		width: 1579px;
	}

	::v-deep .ch_button_seav {
		padding: 7px 27px;

		span {
			display: flex;
			align-items: center;
			justify-content: center;

			div {
				font-size: 16px;
				font-weight: 400;
				margin-left: 10px;
			}
		}

	}

	.ch_button_img_seav {
		width: 24px;
		height: 24px;
	}

	.ch_button_img {
		width: 16px;
		height: 16px;
	}

	.dialog_title_ch {
		border-bottom: 1px solid #EFEFEF;
		padding: 25px 21px 13px 21px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.icon_x-circle {
		width: 24px;
		height: 24px;
		background: url(../../assets/iconfont/x-circle.png);
		background-size: 100% 100%;
		cursor: pointer;
	}

	.icon_x-circle:active {
		background: url(../../assets/iconfont/x-circleactive.png);
		background-size: 100% 100%;
		// opacity: .6;
	}

	::v-deep #viewHeld .el-dialog__header,
	::v-deep #editHeld .el-dialog__header,
	::v-deep #familyHeld .el-dialog__header {
		padding: 0 !important;
		text-align: left;
	}

	::v-deep #viewHeld .el-dialog__body,
	::v-deep #editHeld .el-dialog__body,
	::v-deep #familyHeld .el-dialog__body {
		padding: 17px 20px;
	}

	::v-deep #editHeld .el-dialog__footer {
		padding: 17px 20px;
		border-top: 1px solid #EFEFEF;
	}

	.dialog_title_ch_subheading {
		font-size: 12px;
		font-weight: 400;
		color: #9898989E;
	}

	.dialog_title_ch_subhead {
		font-size: 18px;
		font-weight: 400;
		color: #000;
	}

	.dialog_title_ch_conter_operate {
		padding: 24px 35px;
		// border: 1px solid #EBEBEB;
		border-radius: 2px;
		display: flex;
		// align-items: center;
	}

	.dialog_title_ch_conter {
		padding: 24px 35px;
		border: 1px solid #EBEBEB;
		border-radius: 2px;
		display: flex;
		// align-items: center;

		.dialog_title_ch_conter_left {
		  position: relative;
		  width: 80px;
		  height: 80px;
		  margin-right: 33px;
		
		  img {
		    width: 100%;
		    height: 100%;
		    border-radius: 50%;
		    overflow: hidden;
		  }
		
		  .quan {
		    position: absolute;
		    bottom: 0;
		    right: 0;
		    border: 2px solid #FFFFFF;
		    width: 20px;
		    height: 20px;
		    border-radius: 100%;
		  }
		}

		.dialog_title_ch_conter_right {
			flex: 1;
		}

		.postTitle {
			font-size: 20px;
			font-weight: 400;
			margin-bottom: 8px;
			color: #000;
		}

		.postTitle_conter {
			display: flex;
			// align-items: center;
			justify-content: space-between;

			.postTitle_conter_item {
				flex: auto;

				.postTitle_conter_itemspan {
					margin: 8px 0;
					display: inline-block;
					margin-right: 49px;

					.postTitle_conter_itemspan1 {
						font-size: 15px;
						font-weight: 400;
						color: #989898;
					}

					.postTitle_conter_itemspan2 {
						font-size: 16px;
						font-weight: 400;
						color: #000;
					}
				}
			}
		}
	}

	.on_line {
		background-color: #19CDA6;
	}

	.off_line {
		background-color: #FE294D;
	}

	/*
  编辑
  */
	.editHeld_conter_left {
		margin-right: 70px;
		text-align: center;
	}

	.editHeld_conter_right {
		flex: 1;

		.el-row {
			margin-bottom: 45px;
		}
	}

	::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		text-align: center;
	}

	// ::v-deep  .avatar-uploader .el-upload:hover {
	//   border-color: #409EFF;
	// }
	.editHeld_conter_left .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 160px;
		height: 160px;
		line-height: 160px;
		text-align: center;
	}

	.editHeld_conter_left .avatar {
		width: 160px;
		height: 160px;
		display: block;
		position: relative;

		img {
			width: 100%;
			height: 100%;
		}

		div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: #00000066;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			font-weight: 400;
			color: #FFFFFFAA;
		}
	}

	.authority_bottom {
		max-height: 300px;
		margin-top: 20px;
		overflow-y: auto;

		.content_checkbox {
			.title_che {
				margin-top: 20px;
				margin-bottom: 10px;
				font-size: 15px;
				font-weight: 400;
				color: #989898;
			}

			.title_che_sup {
				font-size: 13px;
				font-weight: 400;
				color: #414141;
			}

			.el-checkbox {
				margin-top: 8px;
			}

			.authority {
				margin-bottom: 25px;
			}
		}
	}
</style>